<template>
  <view class="coupon-list">
    <navigation back title="我的卡/券" />

    <u-sticky>
      <view class="sticky">
        <view class="page-container">
          <u-tabs
            class="tabs"
            lineColor="linear-gradient( 270deg, rgba(255,242,242,0) 0%, #FE774C 100%)"
            lineWidth="42"
            lineHeight="3"
            :activeStyle="activeStyle"
            :itemStyle="itemStyle"
            :list="tabList"
            :current="tabIndex"
            @click="clickTab"
          />
        </view>
      </view>
    </u-sticky>

    <view class="page-container">
      <view class="list">
        <view class="item" v-for="(item, index) in list" :key="index">
          <image
            class="backg"
            :src="
              item.status == 0
                ? '/static/image/coupon/list1.png'
                : '/static/image/coupon/list2.png'
            "
            mode="widthFix"
          />

          <view class="content flex flex-middle">
            <view
              class="left text-center"
              :class="{ color1: item.status == 0, color2: item.status !== 0 }"
            >
              <view>
                <view class="price">
                  <block v-if="item.couponType == 4"> ￥ </block>
                  <text>
                    <block v-if="item.couponType == 4">
                      {{ item.money }}
                    </block>
                    <block v-if="item.couponType == 5">
                      {{ getDiscountStr(+item.money) }}
                    </block>
                  </text>
                </view>
                <view>
                  <block v-if="item.couponType == 4">
                    {{ `满${item.minPrice}可用` }}
                  </block>
                </view>
              </view>
            </view>

            <view class="flex-1">
              <view class="name" :class="{ color2: item.status !== 0 }">
                <block v-if="item.couponType == 4">
                  {{ `${item.money}元满减券` }}
                </block>
                <block v-if="item.couponType == 5">
                  {{ `${getDiscountStr(+item.money)}优惠券` }}
                </block>
              </view>
              <view class="tips" :class="{ color2: item.status !== 0 }">
                适用于下单购买抵扣
              </view>
              <view class="time" :class="{ color2: item.status !== 0 }">
                {{ `有效期限：至${getTime(item)}` }}
              </view>
            </view>
          </view>

          <view
            class="use-btn flex flex-middle flex-center"
            @click="toUse"
            v-if="item.status == 0"
          >
            去使用
          </view>

          <image
            class="cant-use-img"
            mode="widthFix"
            :src="`/static/image/coupon/${
              item.status == 1 ? 'use' : 'lose'
            }.png`"
            v-if="item.status !== 0"
          />
        </view>
      </view>
    </view>

    <view class="safe-bottom">
      <u-loadmore class="loadmore" :status="loadStatus" />
    </view>
  </view>
</template>

<script>
import { getCouponList } from "@/api/coupon";

export default {
  data() {
    return {
      tabIndex: 0,
      tabList: [
        {
          name: "可使用",
        },
        {
          name: "不可使用",
        },
      ],
      activeStyle: {
        color: "#000",
        fontSize: "14px",
      },
      inactiveStyle: {
        color: "#999",
        fontSize: "14px",
      },
      itemStyle: {
        height: "48px",
        width: "50%",
        padding: "0",
      },
      page: 1,
      list: [],
      loading: false,
      totalPage: 0,
    };
  },
  computed: {
    loadStatus() {
      let str = this.loading
        ? "loading"
        : this.totalPage <= this.page
        ? "nomore"
        : "loadmore";
      return str;
    },
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    if (this.totalPage <= this.page) return;
    this.page += 1;
    this.getCouponList();
  },
  onLoad() {
    this.refresh();
  },
  methods: {
    getDiscountStr(num) {
      return `${(num / 10 + "").replace(".", "")}折`;
    },
    toUse() {
      this.$switchTab("/pages/home/index");
    },
    getTime(item) {
      let str = "未知时间";
      if (item?.endTime) str = item.endTime.slice(0, 10);
      return str;
    },
    refresh() {
      this.list = [];
      this.page = 1;
      this.getCouponList();
    },
    async getCouponList() {
      this.loading = true;
      const { data, code } = await getCouponList({
        page: this.page,
        type: !this.tabIndex ? "usable" : "unusable",
      });
      this.loading = false;
      uni.stopPullDownRefresh();
      if (code !== 200) return;
      this.list = this.list.concat(data.list);
      this.totalPage = data.totalPage;
    },
    clickTab({ index }) {
      this.tabIndex = index;
      this.refresh();
    },
  },
};
</script>

<style scoped lang="scss">
.color1 {
  color: #fe774c;
}

.color2 {
  color: #999 !important;
}

.list {
  padding: 0 16px;

  .item {
    position: relative;
    margin-top: 16px;

    .cant-use-img {
      position: absolute;
      right: 16px;
      top: 50%;
      width: 60px;
      margin-top: -27px;
    }

    .use-btn {
      position: absolute;
      right: 16px;
      bottom: 16px;
      background: linear-gradient(270deg, #ffb272 0%, #ff7400 100%);
      border-radius: 11px;
      width: 60px;
      height: 22px;
      color: #fff;
    }

    .content {
      position: absolute;
      width: 100%;
      top: 50%;
      margin-top: -38px;

      .name {
        color: #232323;
        font-size: 15px;
      }

      .tips {
        font-size: 12px;
        color: #9a9ea9;
      }

      .time {
        font-size: 12px;
        color: #232323;
        margin-top: 11px;
      }

      .left {
        width: 29%;
        font-size: 12px;
        margin-right: 16px;

        .price {
          font-size: 16px;
          margin-bottom: -6px;

          text {
            font-size: 30px;
          }
        }
      }
    }

    .backg {
      width: 100%;
    }
  }
}

.loadmore {
  margin: 0 !important;
  padding: 16px 0;
}

.coupon-list {
  min-height: 100vh;
  background: #f6f6f6;
}

.sticky {
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #eee;

  ::v-deep .u-tabs__wrapper__nav__line {
    bottom: 8px !important;
  }
}

.tabs {
  width: 100%;
}
</style>